<!DOCTYPE html>
<html lang="zh">
<head>
    <title>产品中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Truck Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- bootstarp-css -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!--// bootstarp-css -->
    <!-- css -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
    <!--// css -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <!--fonts-->
    <link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600'
          rel='stylesheet' type='text/css'>
    <!--/fonts-->
    <link href="css/animate.css" rel="stylesheet" type="text/css" media="all">


    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/flaticon.css">
    <link rel="stylesheet" href="css/aos.css">
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/style1.css">
    <link rel="stylesheet" href="css/style2.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
    <!--start-smoth-scrolling-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>

    <script type="text/javascript" src="js/responsiveslides.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 900);
            });


            $("#slider1").responsiveSlides({
                pause: true, // 鼠标悬停在幻灯片上暂停
                auto: true, // 自动播放
                pager: true,  // 显示页码
                nav: false,    // 显示左右导航
                speed: 500,
                namespace: "callback",
                before: function () {
                    $('.events').append("<li>before event fired.</li>");
                },
                after: function () {
                    $('.events').append("<li>after event fired.</li>");
                }
            });

            $("#slider2").responsiveSlides({
                pause: true, // 鼠标悬停在幻灯片上暂停
                auto: true, // 自动播放
                pager: true,  // 显示页码
                nav: false,    // 显示左右导航
                speed: 500,
                namespace: "callback1",
                before: function () {
                    $('.events').append("<li>before event fired.</li>");
                },
                after: function () {
                    $('.events').append("<li>after event fired.</li>");
                }
            });

            $('#show-all-bth').click(function () {
                // 全部变为没有选中的颜色
                $('#show-car-btn').css('color', 'black');
                $('#show-machine-btn').css('color', 'black');
                // 全部显示
                $('#car-item').show();
                $('#machine-item').show();
            });

            $('#show-car-btn').click(function () {
                $('#show-car-btn').css('color', 'blue');
                $('#show-machine-btn').css('color', 'black');
                $('#machine-item').hide();
                $('#car-item').show();
            })

            $('#show-machine-btn').click(function () {
                $('#show-machine-btn').css('color', 'blue');
                $('#show-car-btn').css('color', 'black');
                $('#machine-item').show();
                $('#car-item').hide();
            })
        });
    </script>
    <!--start-smoth-scrolling-->

</head>
<body>
<!-- banner -->
<div id="home" class="banner a-banner">
    <!-- container -->
    <div class="container">
        <div class="header">
            <div class="head-logo">
                <a href="index.html"><img src="images/logo.png" alt=""/></a>
            </div>
            <div class="top-nav">
                <span class="menu"><img src="images/menu.png" alt=""></span>
                <ul class="nav1">
                    <li class="hvr-sweep-to-bottom"><a href="index.html">首页<i><img src="images/nav-but1.png"
                                                                                   alt=""/></i></a></li>
                    <li class="hvr-sweep-to-bottom"><a href="about.html">关于<i><img src="images/nav-but2.png"
                                                                                   alt=""/></i></a></li>
                    <li class="hvr-sweep-to-bottom"><a href="services.html">服务<i><img src="images/nav-but3.png" alt=""/></i></a>
                    </li>
                    <li class="hvr-sweep-to-bottom active"><a href="blog.html">产品中心<i><img src="images/nav-but4.png"
                                                                                           alt=""/></i></a></li>
                    <li class="hvr-sweep-to-bottom"><a href="mail.html">联系我们<i><img src="images/nav-but5.png"
                                                                                    alt=""/></i></a></li>
                </ul>
                <!-- script-for-menu -->
                <script>
                    $("span.menu").click(function () {
                        $("ul.nav1").slideToggle(300, function () {
                            // Animation complete.
                        });
                    });
                </script>
                <!-- /script-for-menu -->
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- //container -->
</div>
<!-- //banner -->
<!--blog -->
<div style="min-height: calc(100vh - 465px)" class="blog">
    <div class="container">

        <div class="row">
            <div class="col-3">
                <div class="list-group" style="width: 250px;">
                    <a id="show-all-bth" class="list-group-item" style="background-color: #e3e3e380">
                        产品列表
                    </a>
                    <a id="show-car-btn" class="list-group-item">道路积尘负荷走航车</a>
                    <a id="show-machine-btn" class="list-group-item">非道路移动机械智能检测仪</a>
                </div>
            </div>
            <div class="col-9">
                <div class="list-group">
                    <div href="#" class="list-group-item" id="car-item">
                        <div class="row">
                            <div class="col-3">
                                <img src="./images/car.jpg" alt=""
                                     style="height: 150px;width: 200px;">
                            </div>
                            <div class="col-9">
                                <h1 style="font-size: 16px;font-weight: bold;">道路积尘负荷走航车</h1>
                                <time style="margin: 10px 0;">
                                    <i class="fa fa-calendar"></i>
                                    2023-4-8
                                </time>
                                <br>
                                <span>功能参数 原理：β射线吸收原理 粒径通道:PM2.5/PM10/TSP(任选) 量程范围:0-1000/100 […]</span>
                                <br>
                                <br>
                                <a href="product/car_detail.html"
                                   style="margin-top: 20px; padding: 2px;color: white;"
                                   class="btn-primary">查看全文
                                </a>

                            </div>
                        </div>
                    </div>
                    <div href="#" class="list-group-item" id="machine-item">
                        <div class="row">
                            <div class="col-3">
                                <img src="images/product.jpg" alt="" style="height: 150px;width: 200px;">
                            </div>
                            <div class="col-9">
                                <h1 style="font-size: 16px;font-weight: bold;">非道路移动机械智能检测仪</h1>
                                <time style="margin: 10px 0;">
                                    <i class="fa fa-calendar"></i>
                                    2023-4-8
                                </time>
                                <br>
                                <span>功能参数 原理：β射线吸收原理 粒径通道:PM2.5/PM10/TSP(任选) 量程范围:0-1000/100 […]</span>
                                <br>
                                <br>
                                <a href="product/machine_detail.html"
                                   style="margin-top: 20px; padding: 2px;color: white;"
                                   class="btn-primary">查看全文
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <!--产品中心开始-->
        <!--产品中心结束-->

    </div>
    <!-- //blog -->
    <!-- footer -->

    <!-- //footer -->

</div>
<div class="footer">
    <!-- container -->
    <div class="container">
        <div class="col-md-6 footer-left  wow fadeInLeft animated" data-wow-delay="0.4s"
             style="visibility: visible; -webkit-animation-delay: 0.4s;">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于</a></li>
                <li><a href="services.html">服务</a></li>
                <li><a href="blog.html">产品中心</a></li>
                <li><a href="mail.html">联系我们</a></li>
            </ul>
            <form>
                <label>
                    <input type="text" placeholder="Email" required="">
                </label>
                <input type="submit" value="订阅">
            </form>
        </div>
        <div class="col-md-3 footer-middle wow bounceIn animated" data-wow-delay="0.4s"
             style="visibility: visible; -webkit-animation-delay: 0.4s;">
            <h3>地址</h3>
            <div class="address">
                <p>中国四川省成都市双流区,
                    <span>双流东升街道双楠大道中段333号23栋506号.</span>
                </p>
            </div>
            <div class="phone">
                <p>85815868</p>
            </div>
        </div>
        <div class="col-md-3 footer-right  wow fadeInRight animated" data-wow-delay="0.4s"
             style="visibility: visible; -webkit-animation-delay: 0.4s;">
            <a href="#"><img src="images/logo.png" alt=""/></a>
        </div>
        <div class="clearfix"></div>
    </div>
    <!-- //container -->
</div>
</body>
</html>
